<!-- NavBar.vue - 通用导航栏组件 -->
<template>
  <view class="nav-bar">
    <!-- 左侧返回按钮 -->
    <view class="nav-left" v-if="showBack === true">
      <view class="back-button" @click="onBackClick" style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background-color: rgba(255,255,255,0.1); border-radius: 50%;">
        <uni-icons type="left" size="24" color="white"></uni-icons>
      </view>
    </view>
    <!-- 左侧空白区域（保持标题居中） -->
    <view class="nav-left" v-else></view>
    
    <!-- 中间标题 -->
    <view class="nav-title">{{ title }}</view>
    
    <!-- 右侧操作按钮 -->
    <view class="nav-right">
      <slot name="right"></slot>
      <!-- 右侧搜索按钮 -->
      <uni-icons type="search" size="22" color="white" v-if="showSearch"></uni-icons>
    </view>
  </view>
</template>

<script>
export default {
  name: 'NavBar',
  props: {
    // 导航栏标题
    title: {
      type: String,
      default: '天才宝宝成长系统'
    },
    // 是否显示返回按钮
    showBack: {
      type: Boolean,
      default: false
    },
    // 是否显示搜索按钮
    showSearch: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // 返回按钮点击事件
    onBackClick() {
      // 触发返回事件
      this.$emit('back')
      // 执行页面返回操作
      uni.navigateBack()
    }
  }
}
</script>

<style scoped>
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  padding: 0 16px;
  background-color: #4CAF50;
  color: white;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.nav-left {
  width: 60px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 返回按钮样式 */
.back-button {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.back-button:active {
  background-color: rgba(255, 255, 255, 0.2);
}

.nav-title {
  font-size: 18px;
  font-weight: bold;
}

.nav-right {
  width: 60px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>